<template>
  <div class="dashboard">
    <NavbarHomepage :isLogin="true" />
    <div class="row">
      <div class="slidebar col-md-2">
        <div class="slide-item slide-text" v-on:click="itemIndex = 0">项目</div>
        <div class="slide-item slide-text" v-on:click="itemIndex = 1">
          库文件
        </div>
        <div class="slide-item slide-text" v-on:click="itemIndex = 2">设置</div>
      </div>
      <div class="col-md-10">
        <DashboardProjects v-if="itemIndex == 0"></DashboardProjects>
        <DashboardLibrary v-if="itemIndex == 1"></DashboardLibrary>
        <DashboardSettings v-if="itemIndex == 2"></DashboardSettings>
      </div>
    </div>
  </div>
</template>

<script>
import NavbarHomepage from "@/components/NavbarHomepage.vue";
import DashboardProjects from "@/components/DashboardProjects.vue";
import DashboardLibrary from "@/components/DashboardLibrary.vue";
import DashboardSettings from "@/components/DashboardSettings.vue";

export default {
  name: "Dashboard",
  components: {
    NavbarHomepage,
    DashboardProjects,
    DashboardLibrary,
    DashboardSettings,
  },
  data: function () {
    return {
      itemIndex: 0,
    };
  },
};
</script>

<style scoped>
.slidebar {
  top: 15px;
}
.slide-item {
  color: blueviolet;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  margin-top: 20px;
  cursor: pointer;
}
.slide-text {
  font-family: Microsoft YaHei;
  font-size: 18px;
  font-weight: bold;
}
</style>